<!--
 * @Author: zhou5228 10892268+zhou5228@user.noreply.gitee.com
 * @Date: 2022-11-11 19:05:44
 * @LastEditors: zhou5228 10892268+zhou5228@user.noreply.gitee.com
 * @LastEditTime: 2022-11-11 20:43:34
 * @FilePath: \project-name\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <router-view />
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

body {
  position: relative;
  overflow-x: hidden;
  height: 100vh;
}
        
em {
    position: absolute;
    bottom: 0;
    background: radial-gradient(circle at 72% 28%, #fff 3px, #ff7edf 8%,#5b5b5b,#aad7f9 100%);
    box-shadow: inset 0 0 6px #fff,
                inset 3px 0 6px #eaf5fc,
                inset 2px -2px 10px #efcde6,
                inset 0 0 60px #f9f6de,
                0 0 20px #fff;
    border-radius: 50%;
    animation: myMove 4s linear infinite;
    transition: 2s;
}

@keyframes myMove {
    0% {
        transform: translateY(0%);
        opacity: 1;
    }

    50% {
        transform: translate(10%,-1000%);
    }

    75% {
        transform: translate(-20%,-1200%);
    }

    99% {
        opacity: .9;
    }

    100% {
        transform: translateY(-1800%) scale(1.5);
        opacity: 0;
    }
}
</style>

<script>
            const bubleCreate=()=>{
                const body = document.body
                const buble = document.createElement('em')
                let r = Math.random()*5 + 25 //25~30
                buble.style.width=r+'px'
                buble.style.height=r+'px'
                buble.style.left=Math.random()*innerWidth+'px'
                body.append(buble)
                setTimeout(()=>{
                    buble.remove()
                },4000)
            }
            setInterval(() => {
                bubleCreate()
            }, 200);
        </script>
